﻿@{
    ViewBag.Title = "TestArea";
}

<h2>TestArea</h2>
省

<select id="inputProvince" onchange="showCity();"></select>

市/区

<select id="inputCity" onchange="showTown();"></select>

县
<select id="inputTown"></select>
<button type="button" onclick="btnClick();">点我取值</button>
<script type="text/javascript">

    function showProvince(id) {

        $.ajax({
            url: '/DimArea/GetByParentID/' + id,
            dataType: "json",
            success: function (rs) {


                var inputProvince = $("#inputProvince");
                var html = "";
                if (rs.length > 0) {
                    html = "<option value='-1'>--请选择--</option>";

                    for (var i = 0; i < rs.length; i++) {
                        html += "<option  value='" + rs[i].Id + "'>" + rs[i].SAreaName + "</option>";
                    }
                    inputProvince.html(html);
                   
                }
                //alert(rs);
            }


        })

    }
    function showCity() {
        var provinceID = $("#inputProvince").val();


        $.ajax({
            url: '/DimArea/GetByParentID/' + provinceID,
            dataType: "json",
            success: function (rs) {


                var inputCity = $("#inputCity");
                var html = "";
                if (rs.length > 0) {
                    html = "<option value='-1'>--请选择--</option>";
                    for (var i = 0; i < rs.length; i++) {
                        html += "<option  value='" + rs[i].Id + "'>" + rs[i].SAreaName + "</option>";
                    }
                    inputCity.html(html);

                } else {
                    inputCity.html("");
                }
                //alert(rs);
            }


        })//end ajax


    }

    function showTown() {
        var inputCity = $("#inputCity").val();


        $.ajax({
            url: '/DimArea/GetByParentID/' + inputCity,
            dataType: "json",
            success: function (rs) {


                var inputTown = $("#inputTown");
                var html = "";
                if (rs.length > 0) {
                    html = "<option value='-1'>--请选择--</option>";
                    for (var i = 0; i < rs.length; i++) {
                        html += "<option  value='" + rs[i].Id + "'>" + rs[i].SAreaName + "</option>";
                    }
                    inputTown.html(html);

                } else {
                    inputTown.html("");
                }
                //alert(rs);
            }


        })//end ajax


    }


    function btnClick() {
        var inputProvince = $("#inputProvince").val();
        var inputCity = $("#inputCity").val();
        var inputTown = $("#inputTown").val();
        alert("省:" + inputProvince + ",区:" + inputCity + ",县:" + inputTown);
    }

    $(function () {

        showProvince(1);



    });

</script>